<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">题库查询条件</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="100px" style="margin-bottom: -10px; margin-top: 10px">
        <el-form-item label="题目名称">
          <el-input v-model="searchObj.content" class="police-name" placeholder="请输入题目名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select v-model="searchObj.questionType" class="gridName_select_class" placeholder="请选择题目类型" filterable>
            <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="题目分类">
                    <el-select v-model="searchObj.gridName" class="gridName_select_class" placeholder="请选择题目分类" filterable>
                        <el-option v-for="item in selfAreaList" :key="item.value" :label="item.gridName" :value="item.gridName">
                        </el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top: 1rem">
      <div class="common-list-class">
        <div style="display: flex">
          <div class="common-title-div"></div>
          <div class="common-title-text">题库查询列表</div>
        </div>
        <div style="display: flex">
          <el-upload v-if="
              typeCode == 'business' ||
              roleCode == 'policeManage' ||
              roleCode == 'policeResearchLeader'
            " class="upload-file" :headers="uploadHeader" :before-upload="beforeUpload" :action="uploadUrl" :on-success="uploadSucess" :on-error="uploadError" :show-file-list="false">
            <el-button type="primary" icon="el-icon-download">批量导入</el-button>
          </el-upload>
          <el-button type="primary" v-if="
              typeCode == 'business' ||
              roleCode == 'policeManage' ||
              roleCode == 'policeResearchLeader'
            " size="mini" style="height: 32px; margin-left: 10px" @click="allExportClick" icon="el-icon-position">下载模版</el-button>
          <!-- <el-button type="primary" style="height:32px;" @click="alldaochuClick" icon="el-icon-upload2">批量导出</el-button> -->
          <el-button type="primary" v-if="
              typeCode == 'business' ||
              roleCode == 'policeManage' ||
              roleCode == 'policeResearchLeader'
            " style="height: 32px" icon="el-icon-circle-plus-outline" @click="addPolice">添加</el-button>
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
        <el-table-column prop="content" label="题目名称" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="answer" label="题目答案" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="questionType" label="题目类型" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ questionTypeObj[scope.row.questionType] }}
          </template>
        </el-table-column>
        <el-table-column prop="serviceType" label="题库类别" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ serviceTypeObj[scope.row.serviceType] }}
          </template>
        </el-table-column>
        <el-table-column prop="subjectOneDesc" label="题目分类1" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="subjectTwoDesc" label="题目分类2" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="subjectThreeDesc" label="题目分类3" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
            <el-button type="success" size="mini" icon="el-icon-edit" v-if="
                (typeCode == 'police' && scope.row.serviceType == 0) ||
                (typeCode == 'business' && scope.row.serviceType == 1)
              " @click="editClick(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" v-if="
                (typeCode == 'police' && scope.row.serviceType == 0) ||
                (typeCode == 'business' && scope.row.serviceType == 1)
              " @click="deleteClick1(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>

    <!-- 导入成功或失败列表 -->
    <el-dialog title="导入列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="daoruFlag" width="80%" :before-close="daoruClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">导入列表</div>
      </div>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入成功列表</div>
      </div>
      <el-table :data="successList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="content" label="题目描述" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="subjectOneDesc" label="题目分类1" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="subjectTwoDesc" label="题目分类2" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="subjectThreeDesc" label="题目分类3" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="varA" label="选项A" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="varB" label="选项B" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="varC" label="选项C" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="varD" label="选项D" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="varE" label="选项E" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="varF" label="选项F" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="answer" label="答案" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="answerAnalyse" label="答案解析" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="questionType" label="是否单选" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ questionTypeObj[scope.row.questionType] }}
          </template>
        </el-table-column>
      </el-table>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入失败列表</div>
      </div>
      <el-table :data="failList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
        </el-table-column>
        <el-table-column prop="content" label="题目描述" width="150" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.content" placeholder="请输入题目描述" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="subjectOneDesc" label="题目分类1" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.subjectOneDesc" placeholder="请输入题目分类1" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="subjectTwoDesc" label="题目分类2" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.subjectTwoDesc" placeholder="请输入题目分类2" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="subjectThreeDesc" label="题目分类3" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.subjectThreeDesc" placeholder="请输入题目分类3" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="varA" label="选项A" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varA" placeholder="请输入选项A" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="varB" label="选项B" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varB" placeholder="请输入选项B" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="varC" label="选项C" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varC" placeholder="请输入选项C" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="varD" label="选项D" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varD" placeholder="请输入选项D" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="varE" label="选项E" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varE" placeholder="请输入选项E" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="varF" label="选项F" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varF" placeholder="请输入选项F" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="answer" label="答案" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.answer" placeholder="请输入答案" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="answerAnalyse" label="答案解析" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.answerAnalyse" placeholder="请输入答案解析" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="questionType" label="是否单选" width="200" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.questionType" placeholder="请选择" style="width: 100%">
              <el-option v-for="item in topicTypeList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="失败原因" width="200" show-overflow-tooltip align="center">
          <!-- <template slot-scope="scope">
                        <div style="color:red;">{{scope.row.errorMsg}}</div>
                    </template> -->
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-success" @click="confirmClick(scope.row)">确定</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete-solid" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" :disabled="failList.length !== 0" @click="daoruClick">提交</el-button>
        <el-button size="mini" @click="daoruClose">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 新增警员 和修改警员-->
    <el-dialog :title="isEditTitle" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="cancel" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">{{ isEditTitle }}</div>
      </div>
      <el-form ref="inputObj" :model="inputObj" label-width="100px">
        <el-form-item label="题目名称" class="required-content-red">
          <el-input v-model="inputObj.content" placeholder="请输入题目名称" clearable maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="inputObj.videoUrl" placeholder="请输入视频地址" clearable></el-input>
        </el-form-item>
        <el-form-item label="题目类型" class="required-content-red">
          <el-select v-model="inputObj.questionType" placeholder="请选择题目类型" style="width: 100%" @change="topicTypeChange">
            <el-option v-for="item in topicTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-for="(item, index) in topicList" :key="index">
          <el-form-item :label="item.name" class="required-content-red">
            <el-input v-model="item.title" placeholder="请输入选项答案" clearable>
              <el-button slot="append" style="color: #409eff" v-if="item.name == '选项D'" @click="appendClick" title="新增选项" icon="el-icon-circle-plus"></el-button>
              <el-button slot="append" style="color: red" v-if="item.name == '选项E' || item.name == '选项F'" @click="deleteOptionClick(item)" title="删除选项" icon="el-icon-error"></el-button>
            </el-input>
          </el-form-item>
        </div>
        <el-form-item label="正确答案" class="required-content-red" v-if="inputObj.questionType == '0'">
          <el-select v-model="inputObj.trueresult" placeholder="请选择正确答案" style="width: 100%" @change="trueresultChange">
            <el-option v-for="item in topicList" :key="item.option" :label="item.option" :value="item.option">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="正确答案" class="required-content-red" v-if="inputObj.questionType == '1'">
          <el-select v-model="inputObj.trueresult" placeholder="请选择正确答案" multiple style="width: 100%" @change="trueresultChange">
            <el-option v-for="item in topicList" :key="item.option" :label="item.option" :value="item.option">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目分类" class="required-content-red">
          <div @click="fenleiClick">
            <el-input v-model="inputObj.subjectName" :readonly="true">
              <el-button slot="append" style="color: #409eff" @click="fenleiClick" title="选择" icon="el-icon-edit-outline"></el-button>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="答案解析" class="required-content-red">
          <el-input v-model="inputObj.answerAnalyse" type="textarea" :rows="4">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <el-dialog title="题目分类" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="fenleiFlag" width="40%" :before-close="fenleiClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">题目分类</div>
      </div>
      <el-tree :data="treeList" @node-click="handleNodeClick" node-key="id" highlight-current :props="defaultProps" ref="selectTree" default-expand-all :expand-on-click-node="false">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button  type="primary" size="mini" @click="fenleiSubmit">确 认</el-button> -->
        <el-button size="mini" @click="fenleiClose">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 题目详情 -->
    <el-dialog title="题目详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="40%" :before-close="detailsClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">题目详情</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">题目名称</el-col>
        <el-col :span="15" class="grey-class" :title="detailsObj.content" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap">{{ detailsObj.content }}</el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-bottom: 1rem">
        <el-col :span="4" class="bold-class">题目类型</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.questionTypeDesc
        }}</el-col>
      </el-row>
      <div v-for="(item, index) in detailsObj.topicList" :key="index">
        <el-row type="flex" justify="center">
          <el-col :span="4" class="bold-class">{{ item.name }}</el-col>
          <el-col :span="15" class="grey-class" :title="item.title" style="
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            ">{{ item.title }}</el-col>
        </el-row>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">正确答案</el-col>
        <el-col :span="15" class="grey-class">{{ detailsObj.answer }}</el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-top: 1rem">
        <el-col :span="4" class="bold-class">题目分类1</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.subjectOneDesc
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">题目分类2</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.subjectTwoDesc
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">题目分类3</el-col>
        <el-col :span="15" class="grey-class">{{
          detailsObj.subjectThreeDesc
        }}</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="4" class="bold-class">答案解析</el-col>
        <el-col :span="15" class="grey-class" :title="detailsObj.answerAnalyse" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap">{{ detailsObj.answerAnalyse }}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "policeManage",
  mixins: [mixin],
  data() {
    const self = this;
    return {
      treeList: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      fenleiFlag: false,
      questionTypeObj: {
        0: "单选",
        1: "多选",
      },
      serviceTypeObj: {
        0: "民警",
        1: "企业",
      },
      questionTypeList: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "单选",
        },
        {
          value: 1,
          label: "多选",
        },
      ],
      topicTypeList: [
        {
          value: 0,
          label: "单选",
        },
        {
          value: 1,
          label: "多选",
        },
      ],
      topicList: [
        {
          name: "选项A",
          option: "A",
          title: "",
        },
        {
          name: "选项B",
          option: "B",
          title: "",
        },
        {
          name: "选项C",
          option: "C",
          title: "",
        },
        {
          name: "选项D",
          option: "D",
          title: "",
        },
      ],
      areaFlag: false,
      inputObj2: {},
      statusObj: {
        0: "已停用",
        1: "已启用",
      },
      bhFlag: false,
      successList: [],
      failList: [],
      daoruFlag: false,
      loading: false,
      uploadHeader: {},
      uploadUrl: "/wgry/questions/importedQuestion",
      rules1: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
        roleId: [{ required: true, message: "请选择角色", trigger: "change" }],
      },
      rules2: {
        gridId: [
          { required: true, message: "请选择所属网格", trigger: "change" },
        ],
      },
      rules: {},
      detailsObj: {},
      inputObj: {},
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      tableData: [
        {
          id: "1",
        },
      ],
      searchObj: {},
      selfAreaList: [],
      addselfAreaList: [],
      inputObj1: {},
      currentId: "",
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    // this.initSelfAreaList();
    // this.initaddareaList();
    this.query();
  },
  methods: {
    handleNodeClick(data) {
      console.log("data---->:", data);
      let self = this;
      this.inputObj.subjectName = data.title;
      this.fenleiFlag = false;
      if (data.level == 4) {
        let dataobj = self.getCity([data.parentId], self.treeList);
        this.inputObj.subjectOne = dataobj[0].parentId;
        this.inputObj.subjectTwo = data.parentId;
        this.inputObj.subjectThree = data.id;
      } else if (data.level == 3) {
        this.inputObj.subjectOne = data.parentId;
        this.inputObj.subjectTwo = data.id;
      } else if (data.level == 2) {
        this.inputObj.subjectOne = data.id;
      }
    },
    getCity(arr, data, city = []) {
      let self = this;
      if (typeof data === "object") {
        for (let i = 0; arr[i] !== undefined; i++) {
          for (let j = 0; data[j] !== undefined; j++) {
            if (arr[i] === data[j].id) {
              city.push(data[j]);
            }
          }
        }
        for (let i = 0; data[i] !== undefined; i++) {
          self.getCity(arr, data[i].children, city);
        }
      }
      return city;
    },
    trueresultChange() {
      this.$forceUpdate();
    },
    fenleiClick() {
      this.initFenlei();
    },
    fenleiClose() {
      this.fenleiFlag = false;
    },
    fenleiSubmit() {
      this.fenleiFlag = false;
    },
    topicTypeChange(value) {
      this.$forceUpdate();
      if (value == "0") {
        this.inputObj.trueresult = "";
      } else {
        this.inputObj.trueresult = [];
      }
    },
    deleteOptionClick(item) {
      let self = this;
      if (item.name == "选项E") {
        if (self.topicList.length == 5) {
          self.topicList.splice(4, 1);
        } else if (self.topicList.length == 6) {
          self.topicList.splice(5, 1);
        }
      } else if (item.name == "选项F") {
        self.topicList.splice(5, 1);
      }
      if (this.inputObj.topicType == "1") {
        this.inputObj.trueresult = [];
      } else {
        this.inputObj.trueresult = "";
      }
    },
    appendClick() {
      if (
        this.topicList.map((value) => value["name"]).includes("选项E") &&
        this.topicList.map((value) => value["name"]).includes("选项F")
      ) {
        this.$message.error("最多六个选项！");
        return;
      }
      if (this.topicList.map((value) => value["name"]).includes("选项E")) {
        this.topicList.push({
          name: "选项F",
          option: "F",
          title: "",
        });
      } else {
        this.topicList.push({
          name: "选项E",
          option: "E",
          title: "",
        });
      }
    },
    alldaochuClick() {
      let self = this;
      self.showLoading("操作中");
      let params = {
        gridName: this.searchObj.gridName,
        name: this.searchObj.name,
      };
      self
        .$axios({
          method: "post",
          headers: {
            Authorization: self.requestToken,
          },
          url: `/police/exportedPoliceList`,
          responseType: "blob",
          data: params,
        })
        .then((res) => {
          console.log(res);
          self.hideLoading();
          if (res.status == "200") {
            let href = window.URL.createObjectURL(new Blob([res.data]));
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = href;
            link.setAttribute("download", "民警管理导出.xlsx");
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(href);
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    gridIdChange() {
      this.$forceUpdate();
    },
    daoruClose() {
      this.daoruFlag = false;
    },
    // 确认
    confirmClick(row) {
      let self = this;
      let params = row;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/questions/validateFailQuestion`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.failList.forEach((item, index) => {
              if (item.number == row.number) {
                self.failList.splice(index, 1);
              }
            });
            self.successList.push(res.data.data);
            self.$message({
              message: "校验成功！",
              type: "success",
            });
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    daoruClick() {
      let self = this;
      let params = self.successList;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/questions/addQuestionByImport`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.daoruFlag = false;
            self.$message({
              message: "提交成功！",
              type: "success",
            });
            self.query();
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 删除
    deleteClick(row) {
      let self = this;
      self.failList.forEach((item, index) => {
        if (item.number == row.number) {
          self.failList.splice(index, 1);
        }
      });
      self.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    allExportClick() {
      let url = `${this.modelUrl}题库导入表模板.xls`;
      window.open(url);
    },
    initaddareaList() {
      let self = this;
      this.$axios({
        method: "get",
        url: `/police/queryAddInitInfo`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          if (res.data.code == "20000") {
            self.addselfAreaList = res.data.data.grids;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 初始化所属部门
    initApartmentList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryGirdInfo`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            // this.apartmentList
            console.log(res.data);
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    // 初始化所属责任区
    initSelfAreaList() {
      let params = {};
      this.$axios({
        method: "get",
        url: `/police/queryGirdInfo`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          if (res.data.code == "20000") {
            this.selfAreaList = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    chooseRoleChange3(row) {
      if (row.roleId == "2" || row.roleId == "3") {
        row.girdName = "";
      }
    },
    // 选择角色
    chooseRoleChange(value) {
      if (value == "2" || value == "3") {
        this.inputObj.gridId = "";
      }
    },
    chooseRoleChange1(value) {
      console.log(value);
      if (value == "2" || value == "3") {
        this.inputObj1.gridId = "";
      }
    },
    beforeUpload(file) {
      this.showLoading();
    },
    uploadSucess(response) {
      this.hideLoading();
      if (response.code == "20000") {
        this.daoruFlag = true;
        this.$message({
          message: "导入成功！",
          type: "success",
        });
        this.failList = response.data.failList;
        this.successList = response.data.list;
        console.log("response---->:", response);
      } else {
        this.$message({
          message: response.message,
          type: "error",
        });
      }
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    cancel2() {
      this.areaFlag = false;
      this.inputObj2 = {};
      this.$refs["inputObj2"].resetFields();
    },
    // 新建确认和修改确认
    submit() {
      let self = this;
      if (!self.inputObj.content || !self.inputObj.content.length) {
        self.$message.error("请输入题目名称！");
        return;
      }
      let flag = false;
      self.topicList.forEach((item) => {
        if (!item.title || !item.title.length) {
          flag = true;
        }
      });
      if (flag) {
        self.$message.error("请输入选项答案！");
        return;
      }
      if (!self.inputObj.trueresult || !self.inputObj.trueresult.length) {
        self.$message.error("请选择正确答案！");
        return;
      }
      if (!self.inputObj.subjectName || !self.inputObj.subjectName.length) {
        self.$message.error("请选择题目分类！");
        return;
      }
      if (!self.inputObj.answerAnalyse || !self.inputObj.answerAnalyse.length) {
        self.$message.error("请选择答案解析！");
        return;
      }
      let progress = "";
      if (self.inputObj.questionType == "0") {
        self.inputObj.answer = self.inputObj.trueresult;
      } else {
        self.inputObj.trueresult.forEach((item) => {
          progress += item;
        });
        self.inputObj.answer = progress;
      }
      self.inputObj.varA = self.topicList[0].title;
      self.inputObj.varB = self.topicList[1].title;
      self.inputObj.varC = self.topicList[2].title;
      self.inputObj.varD = self.topicList[3].title;
      if (self.topicList.length == 5) {
        self.inputObj.varE = self.topicList[4].title;
      }
      if (self.topicList.length == 6) {
        self.inputObj.varE = self.topicList[4].title;
        self.inputObj.varF = self.topicList[5].title;
      }
      let params = self.inputObj;
      let url = "";
      if (self.isEditTitle == "编辑") {
        params.id = self.currentId;
        url = "/questions/editQuestionInfo";
      } else {
        url = "/questions/addQuestionInfo";
      }

      self.showLoading();
      self
        .$axios({
          method: "post",
          url: url,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.$message.success(`${self.isEditTitle}成功！`);
            self.newaddFlag = false;
            self.inputObj = {};
            self.topicList = [
              {
                name: "选项A",
                option: "A",
                title: "",
              },
              {
                name: "选项B",
                option: "B",
                title: "",
              },
              {
                name: "选项C",
                option: "C",
                title: "",
              },
              {
                name: "选项D",
                option: "D",
                title: "",
              },
            ];
            self.query();
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 取消点击
    cancel() {
      this.newaddFlag = false;
      this.inputObj = {};
      this.$refs["inputObj"].resetFields();
    },
    cancel1() {
      this.bhFlag = false;
      this.inputObj1 = {};
      this.$refs["inputObj1"].resetFields();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.query();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.query();
    },
    // 查询
    query() {
      let params = {
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
        content: this.searchObj.content,
        questionType: this.searchObj.questionType,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/questions/queryPageList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        params: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.total = res.data.data.total;
          } else if (res.data.code == "30002") {
            this.$router.push("/login");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    //  点击重置
    reset() {
      this.searchObj = {};
      this.query();
    },
    // 启用
    startClick(row) {
      let self = this;
      this.$confirm("请确认是否启用该民警?", "启用", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editOpenStatus/${row.userId}/1`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("启用成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消启用",
          });
        });
    },
    // 删除
    deleteClick1(row) {
      this.$confirm("请确认是否删除该题目?", "删除", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.showLoading();
          this.$axios({
            method: "delete",
            url: `/questions/editQuestionInfoById/${row.id}`,
            headers: {
              Authorization: this.requestToken,
            },
          })
            .then((res) => {
              this.hideLoading();
              if (res.data.code == "20000") {
                this.$message.success("删除成功！");
                this.query();
              } else {
                this.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              this.hideLoading();
              this.$message.error(err);
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    // 停用
    forbidClick(row) {
      let self = this;
      this.$confirm("请确认是否停用该民警?", "停用", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          self.showLoading();
          self
            .$axios({
              method: "get",
              url: `/police/editOpenStatus/${row.userId}/0`,
              headers: {
                Authorization: self.requestToken,
              },
            })
            .then((res) => {
              self.hideLoading();
              if (res.data.code == "20000") {
                self.$message.success("禁用成功！");
                self.query();
              } else {
                self.$message.error(res.data.message);
              }
            })
            .catch((err) => {
              self.hideLoading();
              self.$message.error(err);
            });
        })
        .catch(() => {
          self.$message({
            type: "info",
            message: "已取消停用",
          });
        });
    },
    // 点击新增
    addPolice() {
      this.newaddFlag = true;
      this.isEditTitle = "新增";
      this.inputObj.questionType = 0;
    },
    initFenlei() {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/questions/queryIndexAllSubject`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          if (res.data.code == "20000") {
            this.fenleiFlag = true;
            this.treeList = res.data.data[0].children;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 点击详情展示
    detailsClick(row) {
      let self = this;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/questions/queryQuestionInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.detailsFlag = true;
            let dataList = res.data.data;
            self.detailsObj = res.data.data;
            let topicList = [
              {
                name: "选项A",
                title: dataList.varA,
              },
              {
                name: "选项B",
                title: dataList.varB,
              },
              {
                name: "选项C",
                title: dataList.varC,
              },
              {
                name: "选项D",
                title: dataList.varD,
              },
            ];
            if (dataList.varE && dataList.varE.length) {
              topicList.push({
                name: "选项E",
                title: dataList.varE,
              });
            }
            if (dataList.varF && dataList.varF.length) {
              topicList.push({
                name: "选项F",
                title: dataList.varF,
              });
            }
            self.detailsObj.topicList = topicList;
            self.detailsObj.questionTypeDesc =
              self.detailsObj.questionType == "0" ? "单选" : "多选";
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
    },
    // 变更辖区
    editareaClick(row) {
      let self = this;
      self.currentId = row.userId;
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/police/queryPoliceInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.areaFlag = true;
            self.inputObj2.gridId = res.data.data.gridId;
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
    // 点击修改展示
    editClick(row) {
      let self = this;
      self.currentId = row.id;
      self.isEditTitle = "编辑";
      self.showLoading();
      self
        .$axios({
          method: "get",
          url: `/questions/queryQuestionInfoById/${row.id}`,
          headers: {
            Authorization: self.requestToken,
          },
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.newaddFlag = true;
            let dataList = res.data.data;
            self.inputObj = res.data.data;
            let topicList = [
              {
                name: "选项A",
                title: dataList.varA,
                option: "A",
              },
              {
                name: "选项B",
                title: dataList.varB,
                option: "B",
              },
              {
                name: "选项C",
                title: dataList.varC,
                option: "C",
              },
              {
                name: "选项D",
                title: dataList.varD,
                option: "D",
              },
            ];
            if (dataList.varE && dataList.varE.length) {
              topicList.push({
                name: "选项E",
                option: "E",
                title: dataList.varE,
              });
            }
            if (dataList.varF && dataList.varF.length) {
              topicList.push({
                name: "选项F",
                option: "F",
                title: dataList.varF,
              });
            }
            self.topicList = topicList;
            if (dataList.questionType == 0) {
              self.inputObj.trueresult = dataList.answer;
            } else {
              self.inputObj.trueresult = dataList.answer.split("");
            }
            if (dataList.subjectThreeDesc && dataList.subjectThreeDesc.length) {
              self.inputObj.subjectName = dataList.subjectThreeDesc;
            } else {
              if (dataList.subjectTwoDesc && dataList.subjectTwoDesc.length) {
                self.inputObj.subjectName = dataList.subjectTwoDesc;
              } else {
                self.inputObj.subjectName = dataList.subjectOneDesc;
              }
            }
          } else {
            self.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message.error(err);
        });
    },
  },
};
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 100px;
  height: 36px;
}
.gridName_select_class >>> .el-input__inner {
  width: 200px;
}
/* .police-name >>> .el-input__inner{
       transition:all 0.5s ease-in-out;
  }
  .police-name >>> .el-input__inner:focus, .police-name >>> .el-input__inner:hover{
      width: 220px;
  } */
</style>>